<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>综合练习</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        width: 400px;
        margin: 50px auto;
        padding: 20px;
      }
      hr {
        margin: 15px 0;
      }
      ul {
        list-style: none;
      }

      li{
        margin-bottom: 15px;
        display:flex;
        align-items: center;
      }

      .order {
        font-size: 20px;
        font-weight: bold;
        margin-right: 10px;
      }

      .title {
        margin-right: 10px;
      }
      .hot {
        font-size: 12px;
        padding: 2px 4px;
        background: rgb(240, 65, 66);
        color: white;
        border-radius: 5px;
      }

      /* .container li:nth-child(1) .order{
        color: rgb(168, 46, 46);
      }
      .container li:nth-child(2) .order{
        color: #f25758;
      }
      .container li:nth-child(3) .order{
        color: #ff9a03;
      } */

      .index-1{
        color: rgb(168, 46, 46);
      }

      .index-2{
        color: #f25758;
      }

      .index-3{
        color: #ff9a03;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">
      // https://www.toutiao.com/
      let data = [
        {
          id: 1,
          title: "河北通勤车坠河瞬间曝光",
          time: "2022-06-27",
          is_hot: true,
          is_new: false,
        },
        {
          id: 2,
          title: "国足公布对阵沙特23人大名单",
          time: "2023-06-22",
          is_hot: true,
          is_new: false,
        },
        {
          id: 3,
          title: "“争控”成中印边境谈判关键词",
          time: "2023-05-22",
          is_hot: true,
          is_new: false,
        },
        {
          id: 4,
          title: "五粮液独董郎定常因突发疾病去世",
          time: "2024-04-22",
          is_hot: false,
          is_new: false,
        },
        {
          id: 5,
          title: "王立科被逮捕：曾想停播人民的名义",
          time: "2025-03-22",
          is_hot: false,
          is_new: true,
        },
        {
          id: 6,
          title: "台风“圆规”路径",
          is_hot: true,
          is_new: false,
          time: "2022-07-22",
        },
        {
          id: 7,
          title: "保姆报复前雇主偷走其最爱煎锅",
          is_hot: true,
          is_new: false,
          time: "2022-08-22",
        },
        {
          id: 8,
          title: "中国南海军事演习引发海外关注",
          is_hot: false,
          is_new: false,
          time: "2022-09-06",
        },
        {
          id: 9,
          title: "河北坠河班车已致14人遇难",
          is_hot: true,
          is_new: false,
          time: "2022-10-25",
        },
      ];

      //声明虚拟DOM对象
      let vdom = (
        <div className="container">
          <h2>头条热榜</h2>
          <hr />
          <ul>
            {
              data.map(item => {
                return <li>
                          <span className={"order index-" + item.id} >{item.id}</span>
                          <span className="title" onClick={() => {
                            //点击显示当前新闻的时间
                            alert(item.time);
                          }}>{item.title}</span>
                          {item.is_hot && <span className="hot">热</span>}
                        </li>
              })
            }
          </ul>
        </div>
      );
    
      //渲染
      ReactDOM.render(vdom, document.querySelector('#root'))
    </script>
  </body>
</html>
